<template>
	<view class="w-100">
		<view class="flex-1 row-ac">
			<view class="flex-1 row tab-box" v-for="(item,index) in tabList" :key="index" @click="onClickTab(item,index)"
				:class="{active: tabIndex == index}">
				<view class="font-s-5 tab-name">{{ item.name }}</view>
			</view>
		</view>
		<view class="flex-1">
			<view class="py-3 flex-1 mx-3 border-bottom row-ac" v-for="(item,index) in distributiondataList"
				:key="index">
				<view class="flex-1">
					<view class="font-s-4 font-w">{{ item.types | type1Filter }}</view>
					<view class="font-s-2 text-muted">{{ item.create_time }}</view>
				</view>
				<view class="row-ac cl-red font-w" v-if="item.types == 0 || item.types == 2">
					<view>{{ item.types | type2Filter }}</view>
					<view class="ml-1">{{ item.amount }}</view>
				</view>
				<view class="row-ac cl-green font-w" v-if="item.types == 1">
					<view>{{ item.types | type2Filter }}</view>
					<view class="ml-1">{{ item.amount }}</view>
				</view>
				<view class="row-ac cl-warning font-w" v-if="item.types == 3">
					<view>{{ item.types | type2Filter }}</view>
					<view class="ml-1">{{ item.amount }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
	} from '@/api/index.js';
	import {
		distributorsDetailUrl,
		distributorsSubUrl,
		distributiondataListUrl
	} from '@/api/promotion';
	export default {
		data() {
			return {
				userInfo: '',
				tabIndex: 0,
				tabList: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '收益'
					},
					{
						id: 2,
						name: '已提现'
					},
					{
						id: 3,
						name: '冻结'
					},
					{
						id: 4,
						name: '提现中'
					}
				],
				distriSubList: [],
				queryInfo: {
					types:'',
					page_size: 10
				},
				distributiondataList: []
			}
		},
		filters: {
			type1Filter(types) {
				if (types === 0) {
					return '收入'
				} else if (types === 1) {
					return '提现'
				} else if (types === 2) {
					return '冻结'
				} else if (types === 3) {
					return '提现中'
				}
			},
			type2Filter(types) {
				if (types === 0) {
					return '+'
				} else if (types === 1) {
					return '-'
				} else if (types === 2) {
					return '+'
				} else if (types === 3) {
					return '-'
				}
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
			} else {
				this.loginStatus = false
			}
			this.getDistributiondataList()
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.getDistributorsSub(this.userInfo.id)
				})
			},
			getDistributiondataList() {
				this.$R.get(distributiondataListUrl, this.queryInfo).then(res => {
					this.distributiondataList = res.data.list
					this.distributiondataTotal = res.data.total
				})
			},
			onClickTab(item, index) {
				this.tabIndex = index
				if(this.tabIndex == 0){
					this.queryInfo.types = ''
				}else if(this.tabIndex == 1){
					this.queryInfo.types = 0
				}
				else if(this.tabIndex == 2){
					this.queryInfo.types = 1
				}
				else if(this.tabIndex == 3){
					this.queryInfo.types = 2
				}
				else if(this.tabIndex == 4){
					this.queryInfo.types = 3
				}
				this.getDistributiondataList()
			},
			navTo(item) {
				uni.navigateTo({
					url: item.url
				});
			}
		}
	}
</script>

<style>
	.tab-box {
		height: 80rpx;
		border: 1rpx solid #E0E0E0;
	}

	.active {
		border: 1rpx solid #FF6F07 !important;
	}

	.active .tab-name {
		color: #FF6F07;
	}

	.cl-warning {
		color: #EEA702;
	}
	
	.cl-red {
		color: #E43900;
	}

	.cl-green {
		color: #1A9700;
	}
</style>